@use '@angular/material' as mat;
@import './amixin';
@mixin branding($colors, $suffix) {
  .text-#{$suffix} {
    color: map-get($colors, text) !important;
  }

  .border-#{$suffix} {
    border-color: map-get($colors, border) !important;
  }

  .bg-#{$suffix} {
    background-color: map-get($colors, bg) !important;
  }
}

@mixin base-colors($theme) {
  $config: mat.m2-get-color-config($theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);

  $contrast: mat.m2-get-color-from-palette($primary, default-contrast);

  .loading {
    background-color: mat.m2-get-color-from-palette($primary);
  }

  a {
    color: mat.m2-get-color-from-palette($accent);

    &:hover,
    &:focus,
    &.active {
      color: mat.m2-get-color-from-palette($accent);
    }
  }

  blockquote {
    color: mat.m2-get-color-from-palette($foreground, text, 0.45);
    border-left: 3px solid mat.m2-get-color-from-palette($foreground, divider);
  }

  body,
  .mat-drawer-container {
    color: mat.m2-get-color-from-palette($foreground, text, 0.75);
    background-color: mat.m2-get-color-from-palette($background, background);
    .mat-drawer-inner-container {
      @include scrollbar(mat.m2-get-color-from-palette($primary));
    }
  }

  .text-primary {
    color: mat.m2-get-color-from-palette($primary);
  }

  .text-accent {
    color: mat.m2-get-color-from-palette($accent);
  }

  .text-warn {
    color: mat.m2-get-color-from-palette($warn);
  }

  .bg-primary {
    background-color: mat.m2-get-color-from-palette($primary);
    color: $contrast;
  }

  .bg-accent {
    background-color: mat.m2-get-color-from-palette($accent);
    color: $contrast;
  }

  .bg-warn {
    background-color: mat.m2-get-color-from-palette($warn);
    color: $contrast;
  }

  // theme color from material theme config
  .bg-pink {
    background-color: #c2185b;
    color: $contrast;
  }

  .text-pink {
    color: #c2185b;
  }

  .bg-orange {
    background-color: #e65100;
    color: $contrast;
  }

  .text-orange {
    color: #e65100;
  }

  .bg-yellow {
    background-color: #f57f17;
    color: $contrast;
  }

  .text-yellow {
    color: #f57f17;
  }

  .bg-red {
    background-color: #d32f2f;
    color: $contrast;
  }

  .text-red {
    color: #d32f2f;
  }

  .bg-purple {
    background-color: #512da8;
    color: $contrast;
  }

  .text-purple {
    color: #512da8;
  }

  .bg-indigo {
    background-color: #303f9f;
    color: $contrast;
  }

  .text-indigo {
    color: #303f9f;
  }

  .bg-blue {
    background-color: #1976d2;
    color: $contrast;
  }

  .text-blue {
    color: #1976d2;
  }

  .bg-cyan {
    background-color: #006064;
    color: $contrast;
  }

  .text-cyan {
    color: #006064;
  }

  .bg-teal {
    background-color: #004d40;
    color: $contrast;
  }

  .text-teal {
    color: #004d40;
  }

  .bg-green {
    background-color: #1b5e20;
    color: $contrast;
  }

  .text-green {
    color: #1b5e20;
  }

  .bg-light-green {
    background-color: #4caf50;
    color: $contrast;
  }

  .text-light-green {
    color: #4caf50;
  }

  .bg-brown {
    background-color: #5d4037;
    color: $contrast;
  }

  .text-brown {
    color: #5d4037;
  }

  .bg-grey {
    background-color: #9e9e9e;
    color: $contrast;
  }

  .bg-grey-50 {
    background-color: map-get(mat.$m2-grey-palette, 50);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 50);
  }
  .bg-grey-100 {
    background-color: map-get(mat.$m2-grey-palette, 100);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 100);
  }
  .bg-grey-200 {
    background-color: map-get(mat.$m2-grey-palette, 200);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 200);
  }
  .bg-grey-300 {
    background-color: map-get(mat.$m2-grey-palette, 300);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 300);
  }
  .bg-grey-400 {
    background-color: map-get(mat.$m2-grey-palette, 400);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 400);
  }
  .bg-grey-500 {
    background-color: map-get(mat.$m2-grey-palette, 500);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 500);
  }
  .bg-grey-600 {
    background-color: map-get(mat.$m2-grey-palette, 600);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 600);
  }
  .bg-grey-700 {
    background-color: map-get(mat.$m2-grey-palette, 700);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 700);
  }
  .bg-grey-800 {
    background-color: map-get(mat.$m2-grey-palette, 800);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 800);
  }
  .bg-grey-900 {
    background-color: map-get(mat.$m2-grey-palette, 900);
    color: mat.m2-get-contrast-color-from-palette(mat.$m2-grey-palette, 900);
  }

  .text-grey {
    color: #9e9e9e;
  }

  .ngx-bar {
    background-color: mat.m2-get-color-from-palette($primary) !important;
  }

  hr {
    background: mat.m2-get-color-from-palette($foreground, divider);
  }
}

@mixin custom-overide() {
  .mat-mdc-tooltip {
    font-size: 12px;
  }
  .dark-theme {
    .bg-shadow {
      background-color: rgba(66, 66, 66, 0.85) !important;
    }
    .bg-light {
      background-color: rgba(66, 66, 66, 0.5) !important;
    }
  }
}
